本日小作品:
https://codepen.io/linchinhsuan/pen/GRZXyMq
練習重點摘要:
<a href="#top">
id有錨點的功能,所以當我在<div class="text">
上加上對應的id,就可以讓這個<a>
連結起到「回到最上方」的效果。
linear-gradient(-90deg,#fff1eb,#ace0f9);
漸層色的寫法,三個值分別是方向/顏色一/顏色二。0度為由下往上,然後順時間走,所以-90deg就是顏色一由右往左的意思。
這裡推薦一個網站可以找到漂亮的漸層色:
https://webgradients.com/
linear-gradient(to right,#ff9a9e,#fad0c4);
除了角度之外,linear-gradient
還支援用方向表示,例如to right(相當於90deg)/to top(相當於0deg)來表示漸層的角度。
outline: none
當input或是textarea取得焦點的時候,會有預設的外框線效果,預設的跟背景顯得很突兀所以這裡把它拿掉。
border-radius: 50%;
圓角效果,如果只寫一個值的話就是四邊都要有圓角效果。若值為50%的話就可以畫出正圓形。
---
---
本日結語:
今天是第五天,主要是練習漸層色和表單的內容,若有誤之處懇請各路高手賜教!